<script lang="ts" context="module">
  import type {TabType} from "$lib/ebm";
  import TasksAll from "$lib/tasks/TasksAll.svelte";
  import TasksCompleted from "$lib/tasks/TasksCompleted.svelte";
  import TasksTodo from "$lib/tasks/TasksTodo.svelte";
  import Tabs from "$lib/Tabs.svelte";

  // List of tab items with labels, values and assigned components
  let items:TabType[] = [
    {
      label: "English",
      value: 1,
      component: TasksTodo,
      attributes: [{ k:"subject", v:"en" }],
    },
    {
      label: "Chinese",
      value: 2,
      component: TasksTodo,
      attributes: [{ k:"subject", v:"cn" }],
    },
    {
      label: "Free",
      value: 3,
      component: TasksTodo,
      attributes: [{ k:"subject", v:"free" }],
    },
    {
      label: "Setting",
      value: 4,
      component: TasksCompleted,
      attributes: [{ k:"subject", v:"setting" }],
    },
  ];
</script>

<svelte:head>
  <title>Tasks</title>
</svelte:head>

<Tabs {items} />
